<template>
  <div class="list-pages white-bg">
    <template v-if="tableData.length > 0">
      <div class="search-box" style="margin-bottom: 12px">
        <div class="search-input-box">
          <a-input
            :bordered="false"
            v-model:value="searchText"
            allow-clear
            placeholder="请输入实验名称或班级名称"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>
          <a-button type="primary" @click="getData">搜索</a-button>
        </div>
      </div>
      <div class="opt-button-box">
        <a-button type="primary" class="btn" @click="handleAdd">
          <img
            src="/icons/common/icon-add.png"
            class="icon"
          />加入班级</a-button
        >
      </div>
      <div class="table-wrapper">
        <a-table
          class="table-box"
          row-key="index"
          :columns="columns"
          :dataSource="tableData"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          sticky
          :scroll="{ y: true }"
          :pagination="pagination"
          @change="onChange"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'no'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex == 'class_id'">
              {{
                clazzList.find((item) => item.value == record[column.dataIndex])
                  ?.text
              }}
            </template>
            <template v-if="column.dataIndex == 'enabled'">
              {{ record.enabled ? "正常" : "已停用" }}
            </template>
          </template>
        </a-table>
      </div>
    </template>
    <div class="no-data" v-else>
      <img src="@/assets/no-class.png" class="no-data-icon" alt="" />

      <div class="no-data-text">你还未加入任何班级</div>
      <div class="no-data-btn" @click="handleAdd">加入班级</div>
    </div>
    <a-modal v-model:open="isOpen" title="加入班级" @ok="handleAPIEnabled">
      <div class="option-dialog">
        <div class="content">
          <a-form
            layout="vertical"
            ref="formRef"
            :model="formState"
            :rules="rules"
          >
            <a-form-item label="教师姓名" name="teacher_name">
              <a-input
                v-model:value="formState.teacher_name"
                placeholder="请输入教师姓名"
              />
            </a-form-item>
            <a-form-item label="班级邀请码" name="invide_code">
              <a-input
                v-model:value="formState.invide_code"
                placeholder="请输入班级邀请码"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:open="isSuccess" title="加入班级" :footer="null">
      <div class="option-dialog">
        <div class="title">
          欢迎你，{{ studentData?.student.user?.real_name }}同学
        </div>
        <div class="content">
          <div class="item">
            你已成功加入{{ studentData?.clazz?.cusomer_name }}学校{{
              studentData?.clazz?.teacher_name
            }}老师的班级，如需加入其他老师的班级，请在“我的-我的班级”模块中继续添加。
          </div>
        </div>
        <div class="btn-box">
          <a-button type="primary" @click="isSuccess = false">知道了</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import API from "@/api/user";
import { SearchOutlined } from "@ant-design/icons-vue";
import { computed, onMounted, ref } from "vue";
const searchText = ref("");
const isOpen = ref(false);
const isSuccess = ref(false);
const formState = ref({
  teacher_name: "",
  invide_code: "",
});
const rules = ref({
  teacher_name: [
    { required: true, message: "请输入教师姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  invide_code: [
    { required: true, message: "请输入班级邀请码", trigger: "blur" },
  ],
});
const formRef = ref(null);
const handleAdd = () => {
  console.log("加入班级");
  isOpen.value = true;
};
const class_student_id = ref("");

const handleAPIEnabled = () => {
  formRef.value.validate().then(async () => {
    try {
      console.log("表单验证成功");
      const res = await API.StudentJoinClass(formState.value);
      console.log(res);
      if (res?.class_student_id) {
        await getDetailData(res.class_student_id);
      }
      isOpen.value = false;
      isSuccess.value = true;
      await getData();
    } catch (error) {
      console.error("加入班级失败:", error);
      // 可以添加错误提示
    }
  });
};
const studentData = ref();
const getDetailData = async (id) => {
  try {
    let params = {
      class_student_id: id,
    };
    const res = await API.ClassStudentFetchModelWithDetails(params);
    studentData.value = res;
    console.log("获取班级学生详情成功:", res);
  } catch (error) {
    console.error("获取班级学生详情失败:", error);
    // 可以添加错误提示
  }
};
const tableData = ref([]);

const handleDetail = (row) => {
  console.log(row);
};
const handleFinished = (row) => {};
const columns = ref([
  {
    dataIndex: "no",
    title: "序号",
    width: "80",
  },
  {
    dataIndex: "class_id",
    title: "班级名称",
    ellipsis: true,
    width: "200",
  },
  {
    dataIndex: "teacher_name",
    title: "教师姓名",
    width: "100",
  },
  {
    dataIndex: "enabled",
    title: "班级状态",
  },
  {
    dataIndex: "join_date",
    title: "加入时间",
  },
]);

const onChange = (page) => {
  console.log(page);
  current.value = page.current;
  pageSize.value = page.pageSize;
  getData();
};
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const pagination = computed(() => ({
  position: ["bottomCenter"],
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
  showSizeChanger: true,
  size: "large",
  showTotal: (total) => `共 ${total} 条`,
}));
const clazzList = ref([]);
const getClassData = async () => {
  const res = await API.ClazzOptions({});
  console.log(222, res);
  clazzList.value = res;
};
const getData = async () => {
  let params = {
    current: current.value,
    pageSize: pageSize.value,
    keyword: searchText.value,
  };
  const res = await API.ClassStudentPagedList({
    args: { ...params, for_student: true },
    //type: type.value,
  });
  console.log(res);
  total.value = res.total;
  tableData.value = res.data.map((item) => {
    return {
      ...item,
      ...item.clazz,
    };
  });
};
onMounted(async () => {
  await getClassData();
  await getData();
});
</script>
<style lang="less" scoped>
.btn-box {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.list-pages {
  height: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  .search-box {
    display: flex;
    align-items: center;
    padding: 18px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid #e5e7eb;
    .search-select {
      width: 120px;
    }
    .line {
      width: 1px;
      height: 16px;
      margin: 0 12px;
      background: #bec4ca;
      @media screen and (max-width: 768px) {
        display: none;
      }
    }
    .search-input-box {
      flex: 1;
      display: flex;
      align-items: center;
      @media screen and (max-width: 768px) {
        width: 100%;
        margin-top: 16px;
        justify-content: space-between;
      }
    }
    .search-input {
      flex: 1;
    }
    .search-btn {
      width: 60px;
      height: 32px;
      background: #2776ff;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 32px;
    }
  }
  .table-wrapper {
    width: 100%;
    flex: 1;
    .table-box {
      height: 100%;
    }
  }
  .list-box {
    width: 100%;
    box-sizing: border-box;
    padding-top: 16px;
    overflow: auto;
    display: grid;
    gap: 16px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(261px, 1fr));
    justify-content: space-between;
    .list-item {
      width: 261px;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 8px;
      margin: auto;
      position: relative;
      cursor: pointer;
      &:hover {
        border: 1px solid #2776ff;
        box-shadow: 12px 12px 12px 0px rgba(39, 118, 255, 0.1);
      }
      .item-collect {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.4) url(@/assets/icon-collet.png) no-repeat
          center center;
        border-radius: 0 8px 0 12px;
        &.cur {
          background: #ffffff url(@/assets/icon-collet-cur.png) no-repeat center
            center;
          border-radius: 0 8px 0 12px;
        }
      }

      .list-img {
        width: 245px;
        height: 249px;
        background: #f3f3f3;
        border: 1px solid #e6ebf1;
        border-radius: 8px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }
      .list-content {
        padding: 14px 0 6px;
        display: flex;
        flex-direction: column;
        .content-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #31323a;
          margin-bottom: 10px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .content-col {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .col-user {
            display: flex;
            align-items: center;
            .user-img {
              width: 26px;
              height: 26px;
              border-radius: 50%;
            }
            .user-name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #262626;
              line-height: 16px;
              text-align: left;
              font-style: normal;
            }
          }
          .col-date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8c8c8c;
            line-height: 16px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }

  .pagination-box {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .no-data-icon {
      width: 240px;
      height: 240px;
    }
    .no-data-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #8c8c8c;
      line-height: 20px;
      text-align: right;
      font-style: normal;
      margin: 28px 0;
    }
    .no-data-btn {
      width: 120px;
      height: 40px;
      background: #2776ff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>
